<template>
        <table>
            <thead>
                <tr class="text-center">
                    <th>车名</th>
                    <th>价格</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list" :key="item.id" class="text-center">
                    <td>{{ item.name }}</td>
                    <td>{{ item.price }}</td>
                    <button @click="edit(item.id)">编辑</button>
                </tr>
            </tbody>
        </table>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter,useRoute } from 'vue-router';
const router = useRouter()
const list = ref(
    [
        {
            id: 1,
            name: "奥迪 Q7",
            price: 650000
        },
        {
            id: 2,
            name: "宝马 X6",
            price: 700000
        },
        {
            id: 3,
            name: "奔驰 S350",
            price: 1200000
        }
    ]
)
const edit = id =>{
    const item = list.value.find(item => item.id == id)
    router.push({path:'/:name/:price',query:{id:item.id,name:item.name,price:item.price}})
    console.log(list.value);
}
const route = useRoute()
console.log(route.query.carItemId);
list.value.forEach(item=>{
    if(item.id == route.query.carItemId){
        item.name = route.query.carItemName
        item.price = Number(route.query.carItemPrice)
    }
})
console.log(list.value);
</script>

<style lang="scss" scoped></style>